@import './var.scss';

@mixin all() {
  cover-image,
  cover-view,
  match-media,
  movable-area,
  movable-view,
  page-container,
  root-portal,
  scroll-view,
  swiper,
  swiper-item,
  view,
  icon,
  progress,
  rich-text,
  text,
  button,
  checkbox,
  checkbox-group,
  editor,
  form,
  input,
  keyboard-accessory,
  label,
  picker,
  picker-view,
  picker-view-column,
  radio,
  radio-group,
  slider,
  switch,
  textarea {
    @content;
  }

  /* #ifdef H5*/
  * {
    @content;
  }
  /* #endif */
}

@mixin inner-all() {
  & > {
    cover-image,
    cover-view,
    match-media,
    movable-area,
    movable-view,
    page-container,
    root-portal,
    scroll-view,
    swiper,
    swiper-item,
    view,
    icon,
    progress,
    rich-text,
    text,
    button,
    checkbox,
    checkbox-group,
    editor,
    form,
    input,
    keyboard-accessory,
    label,
    picker,
    picker-view,
    picker-view-column,
    radio,
    radio-group,
    slider,
    switch,
    textarea {
      @content;
    }

    /* #ifdef H5*/
    * {
      @content;
    }
    /* #endif */
  }
}

@mixin text-truncate() {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@mixin icon-size($size, $deep: true) {
  @if $deep == true {
    ::v-deep() {
      .icon-svg {
        width: $size;
        height: $size;
      }
    }
  } @else {
    .icon-svg {
      width: $size;
      height: $size;
    }
  }
}

@mixin text-bold() {
  font-weight: 600;
}

@mixin show_line($line: 1) {
  display: -webkit-box;
  text-overflow: ellipsis;
  white-space: break-spaces;
  -webkit-line-clamp: $line;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@mixin no-scrollbar {
  &::-webkit-scrollbar {
    display: none;
  }
}

@mixin border($position) {
  &::after {
    position: absolute;
    content: '';
    width: 100%;
    left: 0;
    height: 1px;
    background-color: $--color-border;
    transform: scale(1, 0.8);
    transform-origin: center bottom;

    @if $position == 'top' {
      top: 0;
    }

    @if $position == 'bottom' {
      bottom: 0;
    }
  }
}

@mixin float-block() {
  border: $--border;
  border-radius: $--border-radius-sm;
  box-shadow: $--box-shadow;
}

@mixin score-table($border: true) {
  border-radius: $--border-radius-lg;
  border: $--border;

  ::v-deep() {
    .uni-table {
      background-color: transparent;
    }

    .uni-table-th,
    .uni-table-td {
      padding: $--padding-xs $--padding-sm;
      border-bottom: none;
    }

    @if $border == true {
      .uni-table-th,
      .uni-table-td {
        border-bottom: $--border;
      }
    }

    .uni-table-th {
      color: $--color-text-secondary;
      font-size: $--font-size;
      font-weight: normal;
    }

    .uni-table-td {
      color: $--color-text;
      font-size: $--font-size;

      @include text-bold();
    }

    .uni-table-tr:last-of-type .uni-table-td {
      border: none;
    }
  }
}

@mixin form-table() {
  border-radius: $--border-radius-xs;
  border: $--border;
  border-color: #f0f0f0 !important;

  ::v-deep() {
    .uni-table {
      background-color: transparent;
    }

    .uni-table-th,
    .uni-table-td {
      padding: calc($--padding-xs + 2px);
      font-size: $--font-size;
      font-weight: normal;
      border-color: #f0f0f0 !important;
    }

    .uni-table-th {
      color: $--color-text-secondary;
      font-size: $--font-size-mini;
      background-color: $--color-bg-layout;
    }

    .uni-table-td {
      color: $--color-text;
      font-size: $--font-size-mini;

      @include text-bold();
    }

    .uni-table-th:not(:last-of-type),
    .uni-table-td:not(:last-of-type) {
      border-right: $--border;
    }

    .uni-table-tr:last-of-type .uni-table-td {
      border-bottom: none;
    }
  }
}

@mixin score-line-table() {
  ::v-deep() {
    .uni-table {
      background-color: transparent;
    }

    .uni-table-th,
    .uni-table-td {
      border-color: $--color-border;
    }

    .uni-table-th {
      padding: calc($--padding-xs + 1px) $--padding-xs calc($--padding-xs + 1px)
        0;
      color: $--color-text-secondary;
      font-size: $--font-size-mini;
      font-weight: normal;
    }

    .uni-table-td {
      padding: $--padding-xs $--padding-xs $--padding-xs 0;
      color: $--color-text;
      font-size: $--font-size-small;
    }

    .uni-table-tr:last-of-type .uni-table-td {
      border: none;
    }
  }
}

@mixin theme($theme: 'primary') {
  @if $theme == 'primary' {
    --color-primary: #{$--color-primary};
    --color-primary-bg: #{$--color-primary-bg};
  } @else if $theme == 'secondary' {
    --color-primary: #{$--color-secondary};
    --color-primary-bg: #{$--color-secondary-bg};
  }
}
